<template>
  <div class="app-container">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="520px" :close-on-click-modal="false"
      @closed="$emit('close')">
      <x-form ref="xForm" v-model="formData" v-loading="loading" :config="formConfig" />
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionDetail, savePermission, saveModulePermission } from '@/api/permission'
import { importRules, importDic } from '@/utils/index'
import { getToken } from '@/utils/auth'

export default {
  props: {
    mode: {
      // edit, detail, add
      type: String,
      required: true
    },
    id: {
      type: String,
      default: null
    },
    pid: {
      type: String,
      default: null
    }
  },
  data() {
    const _this = this
    return {
      loading: 0,
      dialogVisible: true,
      formData: {
        // isModule: false,
        pid: _this.pid
      },
      formDisabled: false,
      dialogTitle: '编辑',
      showBtn: true,
      treeData: []
    }
  },
  computed: {
    formConfig() {
      const _this = this
      return {
        disabled: _this.formDisabled,
        inline: false,
        item: [
          {
            xType: 'input',
            name: 'permissionName',
            label: '权限名称',
            rules: importRules('inputRequired')
          },
          {
            xType: 'input',
            name: 'value',
            label: '权限值',
            rules: importRules('inputRequired')
          },
          // {
          //   xType: 'select',
          //   type: 'tree',
          //   name: 'pid',
          //   dic: { data: _this.treeData, label: 'name', value: 'id' },
          //   label: '父级'
          // }
        ],
        operate: [
          {
            text: '保存',
            show: _this.showBtn,
            click: _this.savePermission
          },
          {
            text: '取消',
            show: _this.showBtn,
            click: () => {
              _this.dialogVisible = false
            }
          }
        ]
      }
    }
  },
  watch: {
    mode: {
      handler: function (mode) {
        if (this.mode === 'add') {
          this.dialogTitle = '新建'
        }
        if (this.mode === 'edit') {
          this.dialogTitle = '编辑'
          this.getPermissionDetail()
        }
        if (this.mode === 'detail') {
          this.dialogTitle = '详情'
          this.getPermissionDetail()
          this.formDisabled = true
          this.showBtn = false
        }
      },
      immediate: true
    },
    // 'formData.isModule': {
    //   handler: function (val) {
    //     if (this.mode === 'add') {
    //       if (val) {
    //         this.formData.type = 'menu'
    //       } else {
    //         this.formData.type = ''
    //       }
    //     }
    //   },
    //   immediate: true
    // }
  },
  mounted() {

  },
  methods: {
    getPermissionDetail() {
      this.loading++
      getPermissionDetail(this.id, getToken()).then(res => {
        this.formData = res.result
        console.log(this.formData)
      }).catch(e => console.error(e)).finally(() => this.loading--)
    },
    savePermission() {
      this.$refs['xForm'].validate().then(() => {
        this.loading++
        savePermission(this.formData, getToken()).then(res => {
          console.log('addOrUpdateUserInfo' + res)
          this.dialogVisible = false
          this.$message.success(res.message)
          this.$emit('refresh')
        }).catch(e => console.error(e)).finally(() => this.loading--)
      }).catch(e => console.error(e))
    }
  }
}
</script>

<style scoped>
.dialogStyle {
  width: 540px;
}
</style>
